<template>
  <div id="app">
    <mt-header
      fixed
      :title="selected"
      v-show="isShow"
      v-if="isShow_my"
    ></mt-header>
    <keep-alive include="ShouYe">
      <router-view />
    </keep-alive>
    <!-- 音乐组件 -->
    <audio
      :src="getMusic.musicMp3Url"
      controls
      v-show="isShow_music"
      class="music"
      autoplay
    ></audio>

    <mt-tabbar
      v-model="selected"
      fixed
      @click.native="change()"
      v-show="isShow"
    >
      <mt-tab-item id="首页" :class="{ mtItem: selected == '首页' }">
        <img src=".\assets\首页.png" slot="icon" v-show="selected != '首页'" />
        <img
          src=".\assets\首页2.0.png"
          slot="icon"
          v-show="selected == '首页'"
        />
        首页
      </mt-tab-item>
      <mt-tab-item id="分类" :class="{ mtItem: selected == '分类' }">
        <img src=".\assets\分类.png" slot="icon" v-show="selected != '分类'" />
        <img
          src=".\assets\分类2.0.png"
          slot="icon"
          v-show="selected == '分类'"
        />
        分类
      </mt-tab-item>
      <mt-tab-item
        id="购物车"
        class="shop"
        :class="{ mtItem: selected == '购物车' }"
      >
        <mt-badge size="small" type="error" class="bd">{{
          getCount.length
        }}</mt-badge>

        <img
          src=".\assets\购物车 .png"
          slot="icon"
          v-show="selected != '购物车'"
        />
        <img
          src=".\assets\购物车2.0.png"
          slot="icon"
          v-show="selected == '购物车'"
        />

        购物车
      </mt-tab-item>
      <mt-tab-item id="我的" :class="{ mtItem: selected == '我的' }">
        <img src=".\assets\我的.png" slot="icon" v-show="selected != '我的'" />
        <img
          src=".\assets\我的 (1).png"
          slot="icon"
          v-show="selected == '我的'"
        />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "首页",
      isShow: true,
      isShow_my: true,
      isplay: true,
      isShow_music: true,
    };
  },

  methods: {
    change() {
      console.log(this.selected);
      sessionStorage.setItem("item", this.selected);
      if (this.selected == "首页") {
        this.$router.push("/");
      }
      if (this.selected == "分类") {
        this.$router.push("/Fenlei");
      }
      if (this.selected == "购物车") {
        this.$router.push("/Gouwuche");
      }
      if (this.selected == "我的") {
        this.$router.push("/Wode");
      }
    },
  },
  mounted() {},
  //监听属性变化
  watch: {
    $route: {
      handler(path) {
        console.log(path.path);
        if (
          path.path == "/Detail" ||
          path.path == "/edit" ||
          path.path == "/Login" ||
          path.path == "/Register" ||
          path.path == "/Code"
        ) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
        if (path.path == "/My") {
          this.isShow_my = false;
        } else {
          this.isShow_my = true;
        }
        if (path.path == "/Swipdetail") {
          this.isShow = false;
        }
          if (path.path == "/search") {
          this.isShow_my = false;
        }
        if (path.path == "/") {
          this.selected = "首页";
        }
        if (path.path == "/FenLei") {
          this.selected = "分类";
        }
        if (path.path == "/ShopCar") {
          this.selected = "购物车";
        }
        if (path.path == "/My") {
          this.selected = "我的";
        }
        if (
          path.path == "/Login" ||
          path.path == "/Register" ||
          path.path == "/Code" ||
          path.path == "/" ||
          path.path == "/Gouwuche" ||
          path.path == "/Wode"

        ) {
          this.isShow_music = false;
        } else {
          this.isShow_music = true;
        }
      },
      immediate: true,
      // $route(path){
      //     console.log(path);
      //     if(path.path=="/detail"){
      //         this.isShow=false;
      //     }else{
      //        this.isShow=true;
      //     }
      // }
    },
  },
  computed: {
    getCount() {
      return this.$store.state.list;
    },
    //获取音乐信息
    getMusic() {
      return this.$store.state.musicInFo;
    },
  },
};
</script>

<style scoped>
.mtItem {
  color: red !important;
}
.content {
  margin-top: 45px;
  margin-bottom: 60px;
}

.shop {
  position: relative;
}
.bd {
  top: 1%;
  left: 60%;
  position: absolute;
}
#app {
  height: 1000px;
}
.music {
  position: fixed;
  bottom: 60px;
}
</style>
